<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>后台管理</title>
	<link rel="stylesheet" href="/public/layui/css/layui.css">
	<style>
		#subhomeframe {
			width: 100%;
			height: 100%;
			border: 0;
		}

		.layui-body-content {
			box-sizing: border-box;
			padding: 10px;
			height: 100%;
		}
  .logo{
   cursor: pointer;
  }
	</style>
</head>

<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo logo">SHOPPING</div>
			<!-- 头部区域（可配合layui已有的水平导航） -->
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item">
					<a href="javascript:;" class="user">
						<img src="../public/img/1722761748697.jpg" class="layui-nav-img">
						<span>-</span>
					</a>
				</li>
				<li class="layui-nav-item"><a href="/">退出</a></li>
			</ul>
		</div>

		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree" lay-filter="test">
				</ul>
			</div>
		</div>

		<div class="layui-body">
			<div class="layui-body-content">
				<iframe id="subhomeframe" src=""></iframe>
			</div>
		</div>

		<div class="layui-footer">
			© layui.com - 底部固定区域
		</div>
	</div>
	<script src="/public/layui/layui.js"></script>

	<script>
		//JavaScript代码区域
		layui.config({
			base: '/public/js/'
		}).use(['element', 'jquery', 'table'], function () {
			var element = layui.element, $ = layui.jquery;
			const navList = [{
				title: "商品管理",
				src: './good.html'
			}, {
				title: "订单管理",
				src: './order.html'
			}, {
				title: "用户管理",
				src: './user.html'
			}]
   $('.logo').click(function () {
    window.location.href = '/'
   })
			let str = ''
			navList.forEach(c => {
				str += `<li class="layui-nav-item" src="${c.src}"><a href="javascript:;">${c.title}</a></li>`
			})
			$('.layui-nav-tree').html(str)
			$('.layui-nav-tree .layui-nav-item').click(function () {
				const src = $(this).attr("src");
				if (document.getElementById("subhomeframe").src == src.replace('.', window.location.origin)) return
				window.sessionStorage.setItem('src', src)
				document.getElementById("subhomeframe").src = src || "about:blank";
			})
			document.getElementById("subhomeframe").src = window.sessionStorage.getItem('src') || "./good.html";
			const user = JSON.parse(sessionStorage.getItem('user') || '{}')
			if (user._id) {
				$('.user span').text(user.username)
				$('.user img')[0].src = user.img
			} else {
				window.location.href = '/'
			}
		});
	</script>
</body>

</html>